<template>
  <!-- 银行显示区域 -->
  <div class="vx-payee-name-book">
    <!-- 收款人名册弹窗 -->
    <!-- 弹出层内容 -->
    <ui-dialog :before-close="handleClose" title="常用关系名单" :visible.sync="isShowDialog" width="80%">
      <ui-form :model="form" ref="form" class="query-form">
        <ui-form-item class="payment-lot-name" prop="billType">
          <!-- 全部类型/企业/银行/财务公司 -->
          <ui-radio-group v-model="form.contactType" class="three-radio-group" value-key="form.billType">
            <ui-radio-button :label="item.value" v-for="(item, index) in $field('contactTypeDict')" :key="index">{{ item.text }}</ui-radio-button>
          </ui-radio-group>
        </ui-form-item>
        <ui-form-item>
          <ui-input v-model="form.contactName" placeholder="请输入联系人姓名"></ui-input>
        </ui-form-item>
        <ui-form-item>
          <ui-select :popper-append-to-body="false" v-model="form.contactAcctNo" placeholder="账号" clearable>
            <ui-option v-for="(item, index) in contactAcNoList" :key="index" :value="item" :label="item | formatStringFilter"></ui-option>
          </ui-select>
        </ui-form-item>
        <ui-form-item>
          <ui-button class="default-btn" @click="reset('form')">重置</ui-button>
          <ui-button class="primary-btn" @click="searchCall()">查询</ui-button>
        </ui-form-item>
      </ui-form>
      <vx-nodata :list="tableList">
        <!-- 列表 -->
        <ui-table :data="tableList" v-loading="isLoading" ref="table" highlight-current-row>
          <ui-table-column align="center" width="80" label="请选择">
            <template slot-scope="scope">
              <ui-radio @change="chooseBtn(scope.row)" v-model="isChecked" :label="scope.row.id">{{ '' }}</ui-radio>
            </template>
          </ui-table-column>
          <ui-table-column align="center" prop="contactAcctNo" show-overflow-tooltip label="账号">
            <template slot-scope="scope">
              {{ scope.row.contactAcctNo | formatStringFilter }}
            </template>
          </ui-table-column>
          <ui-table-column prop="contactCorpName" align="center" show-overflow-tooltip label="名称"></ui-table-column>
          <ui-table-column prop="contactType" align="center" show-overflow-tooltip label="类型">
            <template slot-scope="scope">
              {{ $msg('contactTypeDict')[scope.row.contactType] }}
            </template>
          </ui-table-column>
          <ui-table-column prop="contactName" align="center" show-overflow-tooltip label="联系人"></ui-table-column>
          <ui-table-column prop="contactPhone" align="center" show-overflow-tooltip label="联系人电话">
            <template slot-scope="scope">
              {{ scope.row.contactPhone | formatStringFilter([3, 4, 4]) }}
            </template>
          </ui-table-column>
          <ui-table-column align="center" prop="contactAcctInstName" show-overflow-tooltip label="开户行"></ui-table-column>
        </ui-table>
        <!-- 分页 -->
        <ui-pagination
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          :layout="layout"
          :page-sizes="pageSizeList"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </ui-pagination>
      </vx-nodata>
      <div class="justify-center">
        <ui-button class="default-btn" @click="handleClose">返回</ui-button>
        <ui-button class="primary-btn" @click="choiceClick">确认</ui-button>
      </div>
    </ui-dialog>
  </div>
</template>

<script>
import ticketApi from '@/api/electBill/ticketAdd.js';
import pagination from '@/common/mixin/pagination.js'; // 混入/分页
export default {
  name: 'vx-payee-name-book',
  mixins: [pagination],
  props: {
    isShowDialog: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      form: {
        contactType: '0', // 联系人类型
        contactName: '', // 联系人姓名
        contactAcctNo: '', // 账号
      },
      contactAcNoList: [], // 账号列表
      isLoading: false,
      tableList: [],
      isChecked: '0',
      chooseData: {}, // 选中的数据
    };
  },
  created() {
    this.getContactAcNo();
    this.searchList();
  },
  methods: {
    // 获取账号
    async getContactAcNo() {
      try {
        const res = await ticketApi.getChangYongLianXiRenQry();
        this.contactAcNoList = res.contactAcNoList;
      } catch (err) {
        this.$message.error(err);
      }
    },
    // 查询
    async searchList() {
      try {
        this.isLoading = true;
        const res = await ticketApi.getChangYongLianXiRenQry(this.form);
        this.total = res.total;
        this.tableList = res.List;
      } catch (err) {
        this.$message.error(err);
      } finally {
        this.isLoading = false;
      }
    },
    // 重置表单
    reset(form) {
      this.form = {
        contactType: '0',
        contactName: '',
        contactAcctNo: '',
      };
      this.searchList();
      this.$refs[form].resetFields();
    },
    // 选择按钮
    chooseBtn(val) {
      this.isChecked = val.id;
      this.$refs.table.setCurrentRow(val);
      this.chooseData = val;
    },
    // 选择之后
    choiceClick() {
      if (this.isChecked === '0') {
        this.$message.info('请选择联系人');
      } else {
        this.$emit('payeeNameBookWay', this.chooseData);
        // 还原选中按钮
        this.isChecked = '0';
        // 清除选中数据
        this.chooseData = {};
        // 清除选中样式
        this.$refs.table.setCurrentRow('');
      }
    },
    handleClose() {
      this.isChecked = '0';
      this.chooseData = {};
      this.$emit('closePayeeBook', false);
    },
  },
};
</script>
<style lang="scss">
.vx-payee-name-book {
  .ui-dialog__header {
    text-align: center;
    margin-bottom: 30px;
    .ui-dialog__title {
      font-size: 24px;
      font-weight: 600;
      color: $color-text-main;
      line-height: 33px;
    }
  }
  .ui-radio-button__inner {
    width: 81px;
  }
}
</style>
